
<section class="support">

  <!-- 分类导航 -->
   <div class="shop_class">
     <div class="class_one">
        <el-row>
          <el-col :span="3">
            <span class="sup_type">分类</span>
          </el-col>
          <ul class="cla_list">
            <li>PP</li>
            <li>PE</li>
            <li>PVC</li>
            <li>ABS</li>
            <li>PS</li>
            <li>AS</li>
            <li>PA</li>
            <li>PC</li>
            <li>茂金属</li>
            <li>EAA</li>
            <li>塑料制品</li>
          </ul>
        </el-row>
     </div>
    
      <div class="class_one">
        <el-row>
          <el-col :span="3">
            <span class="sup_type">产地</span>
          </el-col>
          <ul class="cla_list">
            <li>PP</li>
            <li>PE</li>
            <li>PVC</li>
            <li>ABS</li>
            <li>PS</li>
            <li>AS</li>
            <li>PA</li>
            <li>PC</li>
            <li>茂金属</li>
            <li>EAA</li>
            <li>塑料制品</li>
          </ul>
        </el-row>
      </div>
      <div class="class_one">
        <el-row>
          <el-col :span="3">
            <span class="sup_type">库别</span>
          </el-col>
          <ul class="cla_list">
            <li>PP</li>
            <li>PE</li>
            <li>PVC</li>
            <li>ABS</li>
            <li>PS</li>
            <li>AS</li>
            <li>PA</li>
            <li>PC</li>
            <li>茂金属</li>
            <li>EAA</li>
            <li>塑料制品</li>
          </ul>
        </el-row>
      </div>
  <div class="class_one">
    <el-row>
      <el-col :span="3">
        <span class="sup_type">筛选</span>
      </el-col>
      <ul class="cla_list">
        <li>全部结果 <i class="el-icon-arrow-right"></i></li>
       <li><el-tag size="medium" closable>分类：PP</el-tag></li> 
      
      </ul>
    </el-row>
  </div>
   </div>
   <!-- 搜索 -->
   <div class="shop_serch">
        <div class="sher_left">
            <span class="keyword">关键字</span>
            <el-select v-model="value9" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod"
              :loading="loading">
              <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <span>交货方式</span>
              <el-select v-model="value" placeholder="全部" class="delivery">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
        </div>
          <div class="sher_right">
            <span class="sher_num"> <i>1</i>/42</span>
          <el-button-group class="one">
            <el-button type="" icon="el-icon-arrow-left"></el-button>
            <el-button type="">
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
          </el-button-group>
          </div>
   </div>
   <!-- 数剧列表 -->
   <div class="shop_list">
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="type" label="分类">
      </el-table-column>
      <el-table-column prop="marknum" class-name="grade" label="牌号">
      </el-table-column>
      <el-table-column prop="company" label="厂家">
      </el-table-column>
      <el-table-column prop="num" label="数量（吨)" width="110">
        <template slot-scope="scope">
          <span :class="{'goodColo':scope.row.num==='无货'?true:false}">{{scope.row.num}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="交货地">
      </el-table-column>
      <el-table-column prop="sendway" label="交货方式">
      </el-table-column>
      <el-table-column prop="updatetime" label="更新时间" width="120">
        <template slot-scope="scope">
          {{scope.row.updatetime}}分钟前
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格" sortable width="150">
        <template slot-scope="scope">
          <p class="price_color">￥{{scope.row.price}}吨</p>
          <img src="../../assets/img/trend.png">
    
        </template>
      </el-table-column>
      <el-table-column prop="updown" sortable label="涨跌">
        <template slot-scope="scope">
          <p class="upColor" v-if="scope.row.updown && scope.row.updown.indexOf('↑') > -1 ">{{ scope.row.updown }}</p>
          <p class="downColor" v-else>{{ scope.row.updown }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="" label="" width="50">
    
        <template slot-scope="scope">
          <span class="">
            <img src="../../assets/img/rest.png" alt="">
    
          </span>
        </template>
    
      </el-table-column>
      <el-table-column prop="" label="" width="50">
        <template slot-scope="scope">
          <span>
            <img src="../../assets/img/service.png" alt="">
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="" width="130">
        <template slot-scope="scope">
          <span>
            <el-button type="primary" size="medium">立即采购</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

 <div class="pageing">
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
   </div>

   </div>
  
</section>

